<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        .searchbox-content {
            width: 368px;
            border-radius: 2px 0 0 2px;
            background: #fff;
        }

        #searchbox #searchbox-container {
            position: relative;
            z-index: 2;
            pointer-events: auto;
            width: 216px;
            float: left;
            box-sizing: border-box;
            box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
        }

        #sole-searchbox-content #suggestId {
            box-sizing: border-box;
            border: 0;
            padding: 9px 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            line-height: 20px;
            font-size: 16px;
            height: 38px;
            color: #333;
            position: relative;
            border-radius: 2px 0 0 2px;
        }

        .searchbox-content .searchbox-content-common {
            box-sizing: border-box;
            float: left;
            width: 217px;
            height: 38px;
        }

        #searchbox #search-button {
            pointer-events: auto;
            background: url(http://webmap0.map.bdstatic.com/wolfman/static/common/images/new/searchbox_f175577.png) no-repeat 0 -76px #3385ff;
            width: 57px;
            height: 38px;
            float: left;
            border: 0;
            padding: 0;
            cursor: pointer;
            border-radius: 0 2px 2px 0;
            box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
        }

        .clearfix {
            position: absolute;
            top: 0px;
            right: 0px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=d1pistIRVscsFaX4YjNPhn3MSBzO5DfG"></script>
    <title>显示标杆位置</title>
</head>
<body>
<div id="allmap" style="width: 100%;height: 365px"></div>
<div id="searchbox" class="clearfix">
    <div id="searchbox-container">
        <div id="sole-searchbox-content" class="searchbox-content">
            <input id="suggestId" class="searchbox-content-common" type="text" name="word" autocomplete="off"
                   maxlength="256" placeholder="搜地点" value="">
            <div id="searchResultPanel"
                 style="border:1px solid #C0C0C0;width:215px;height:auto; display:none;"></div>
        </div>
    </div>
    <button id="search-button" data-title="搜索" data-tooltip="1"></button>
</div>
</body>
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    $(function () {
        function getQueryString(name) {
            var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
            if (result == null || result.length < 1) {
                return "";
            }
            return result[1];
        }

        var marker;
        var x = getQueryString("x");
        var y = getQueryString("y");
        var z = getQueryString("z");


        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrl_nav);

            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, enableGeolocation: true});
            map.addControl(ctrl_sca);

            /*   var geolocationControl = new BMap.GeolocationControl();
             geolocationControl.addEventListener("locationSuccess", function (e) {

             });
             geolocationControl.addEventListener("locationError", function (e) {
             // 定位失败事件
             alert(e.message);
             });
             map.addControl(geolocationControl);*/


        }

        addMapControl();
        var point = new BMap.Point(x, y);
        map.centerAndZoom(point, 16);
        map.clearOverlays();
        marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);
        map.enableScrollWheelZoom(true);
        function updatePosition(x, y) {
            var p = new BMap.Point(x, y);
            marker.setPosition(p);
            map.centerAndZoom(p, 16);
        }

        if (z == 1) {
            setTimeout(function () {
                updatePosition(x, y)
            }, 200);
        }

        //搜索
        function G(id) {
            return document.getElementById(id);
        }

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input": "suggestId"
                , "location": map
            });

        ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }
            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
            setPlace();
        });

        $("#search-button").click(function () {
            myValue = $("#suggestId").val();
            setPlace();
        });

        $("#suggestId").keydown(function (event) {
            if (event.keyCode == 13) {
                myValue = $("#suggestId").val();
                setPlace();
            }
        });

        function setPlace() {
            map.clearOverlays();   //清除地图上所有覆盖物
            // $.drawPiont();
            function myFun() {
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 15);
                var m = new BMap.Marker(pp);
                map.addOverlay(m);    //添加标注
                m.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            }

            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }
    })
</script>